<template>
  <!-- 生成采购单  -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <el-collapse-item title="订单信息" name="1">
        <order-detail :list="this.purchaseRequestDetail"></order-detail>
      </el-collapse-item>
      <el-collapse-item title="待下订单" name="2">
        <pending-order :list="pendingOrderList"></pending-order>
      </el-collapse-item>
      <el-collapse-item title="下订单记录" name="3">
        <order-record
          @getPurchaseRequestById="getPurchaseRequestById"
        ></order-record>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import orderDetail from './components/orderDetail.vue'
import pendingOrder from './components/pendingOrder.vue'
import orderRecord from './components/orderRecord.vue'
export default {
  name: 'createPurchaseOrder',
  data () {
    return {
      activeNames: ['1', '2', '3'],
      loading: false,
      isSaveing: false,
      purchaseRequestDetail: [],//请购单详情列表
      pendingOrderList: [],//待下订单列表
    }
  },
  components: {
    orderDetail,
    pendingOrder,
    orderRecord
  },
  mounted () {
    this.getPurchaseRequestById()
  },
  methods: {
    // 根据id查看多个请购详情
    async getPurchaseRequestById (val) {
      console.log(val)
      let param = {
        ids: this.$route.query.ids,
        generateState: 1// 生单状态 1未生单 2已生单
      }

      let { data } = await this.$API.purchase.getPurchaseRequestById.get(param)
      console.log(data)
      this.purchaseRequestDetail = data
      let list = []
      this.purchaseRequestDetail.map(item => {
        item.requisitionProductList.map(r_item => {
          if (item.id == r_item.requisitionId) {
            r_item.purchaseCode = item.purchaseCode
          }
        })
        list.push(...item.requisitionProductList)
      })
      console.log(list)
      this.pendingOrderList = list
    },

    getadta () {
      console.log(3333)
    }
  }
}
</script>
<style lang="scss" scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
}
</style>